<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>《Flutter DrawFrame（）》 - 飞雪无情的博客</title><meta name="Description" content="专注于IT互联网，包括但不限于Go语言(golang)、Java、Android、Python、项目管理、抖音分析、软件架构等"><meta property="og:title" content="《Flutter DrawFrame（）》" />
<meta property="og:description" content="
本文主要介绍RendererBinding.drawFrame() 负责生成帧。这个方法对于理解 Flutter 渲染过程非常重要。简单了解下。
" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.flysnow.org/posts/flutter/Flutter-drawFrame/" />
<meta property="article:published_time" content="2021-07-31T21:11:19+08:00" />
<meta property="article:modified_time" content="2021-07-31T21:11:19+08:00" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="《Flutter DrawFrame（）》"/>
<meta name="twitter:description" content="
本文主要介绍RendererBinding.drawFrame() 负责生成帧。这个方法对于理解 Flutter 渲染过程非常重要。简单了解下。
"/>
<meta name="application-name" content="飞雪无情的博客">
<meta name="apple-mobile-web-app-title" content="飞雪无情的博客"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://www.flysnow.org/posts/flutter/Flutter-drawFrame/" /><link rel="prev" href="https://www.flysnow.org/posts/flutter/FlutterPerformance%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7%E7%AE%80%E4%BB%8B/" /><link rel="next" href="https://www.flysnow.org/posts/flutter/Flutter%E4%B9%8BprecacheImage%E8%A7%A3%E6%9E%90/" /><link rel="stylesheet" href="/lib/normalize/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="/lib/animate/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "《Flutter DrawFrame（）》",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/www.flysnow.org\/posts\/flutter\/Flutter-drawFrame\/"
        },"genre": "posts","keywords": "flutter","wordcount":  647 ,
        "url": "https:\/\/www.flysnow.org\/posts\/flutter\/Flutter-drawFrame\/","datePublished": "2021-07-31T21:11:19+08:00","dateModified": "2021-07-31T21:11:19+08:00","publisher": {
            "@type": "Organization",
            "name": "飞雪无情"},"author": {
                "@type": "Person",
                "name": "飞雪无情"
            },"description": ""
    }
    </script></head>
    <body header-desktop="" header-mobile=""><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><div class="logo-wrapper">
  <a href="/%20/" class="logo">飞雪无情的博客</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
      <a class="menu-item-link" href="/tools/">工具</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/archives/">归档</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/about/">关于</a>
    </li>
  </ul>
</nav><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">Contents</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">《Flutter DrawFrame（）》</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>飞雪无情</a></span>&nbsp;<span class="post-category">included in <a href="/categories/Flutter/"><i class="far fa-folder fa-fw"></i>Flutter</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-07-31">2021-07-31</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;647 words&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;2 minutes&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        title="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>Contents</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents"></nav></div>
            </div><div class="content" id="content"><blockquote>
<p>本文主要介绍<code>RendererBinding.drawFrame()</code> 负责生成帧。这个方法对于理解 Flutter 渲染过程非常重要。简单了解下。</p>
</blockquote>
<p><code>RendererBinding.drawFrame()</code> 由 <code>SchedulerBinding.handleDrawFrame()</code> 方法调用，而后者又自动被引擎调用(如果引擎需要布局和绘制一帧的话)。</p>
<p><code>RendererBinding.drawFrame()</code> 的源码如下：</p>
<pre><code>void drawFrame() {
    assert(renderView != null);
    // 布局
    pipelineOwner.flushLayout();
    // 检查是否需要重绘
    pipelineOwner.flushCompositingBits();
    // 重绘
    pipelineOwner.flushPaint();
    renderView.compositeFrame(); // this sends the bits to the GPU
    pipelineOwner.flushSemantics(); // this also sends the semantics to the OS.
}
</code></pre><p><code>flushPaint()</code> 调用 <code>PaintingContext.repaintCompositedChild(node)</code> 方法，后者是真正的绘制逻辑。</p>
<p>每帧由以下几个阶段组成：</p>
<ol>
<li>动画阶段 - <code>SchedulerBinding.handleBeginFrame</code> (由 <code>Window.onBeginFrame</code> 注册)，按注册顺序调用所有的临时帧回调 (由 <code>scheduleFrameCallback</code> 注册)。这些回调包括所有用于驱动 <code>AnimationController</code> 对象的 <code>Ticker</code> 实例，即该时间点的所有活跃 <code>Animation</code> 对象。</li>
<li>Microtasks - <code>handleBeginFrame</code> 返回后，由临时帧回调注册的方法调度的 microtasks 开始运行。之后，由 <code>Window.onDrawFrame</code> 注册的 <code>handleDrawFrame</code> 回调开始执行，它调用所有的持久帧回调。其中最重要的是 <code>drawFrame</code> 方法，它的处理过程如下</li>
<li>布局阶段 - 对系统中的所有标记为脏的 <code>RenderObject</code> (如何将对象标脏以便布局，可参考 <code>RenderObject.markNeedsLayout</code>) 进行布局</li>
<li>compositing bits 阶段 - 更新所有标脏 <code>RenderObject</code> 中的 compositing bits。具体参考 <code>RenderObject.markNeedsCompositingBitsUpdate</code></li>
<li>绘制阶段 - 系统中的所有标脏 <code>RenderObject</code> 被重绘。这个过程生成 <code>Layer</code> 树。如何将对象标脏以便绘制，可参考 <code>RenderObject.markNeedsPaint</code></li>
<li>合成阶段 - 将 layer tree 转换成 <code>Scene</code> 并发送到 GPU</li>
<li>semantics 阶段 - 系统中的所有标脏 <code>RenderObject</code> 的 semantics 被更新。具体见 <code>RenderObject.semanticsAnnotator</code>。这个过程生成 <code>SemanticsNode</code> 树。如何将对象标脏以用于 semantics，可参考 <code>RenderObject.markNeedsSemanticsUpdate</code></li>
<li>步骤 3-7 的细节请参考 <code>PipelineOwner</code></li>
<li>结束阶段 - <code>drawFrame</code> 返回后，<code>handleDrawFrame</code> 调用 post-frame 回调。(由 <code>addPostFrameCallback</code> 注册)</li>
</ol>
<p>注意：某些绑定会向上述过程添加额外步骤，比如，<code>WidgetsBinding</code> 会添加 <code>WidgetsBinding.drawFrame</code>。</p></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>Updated on 2021-07-31</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/flutter/">flutter</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">Back</a></span>&nbsp;|&nbsp;<span><a href="/">Home</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/posts/flutter/FlutterPerformance%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7%E7%AE%80%E4%BB%8B/" class="prev" rel="prev" title="《FlutterPerformance分析工具简介》"><i class="fas fa-angle-left fa-fw"></i>《FlutterPerformance分析工具简介》</a>
            <a href="/posts/flutter/Flutter%E4%B9%8BprecacheImage%E8%A7%A3%E6%9E%90/" class="next" rel="next" title="《Flutter之precacheImage（）解析》">《Flutter之precacheImage（）解析》<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">Powered by <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> | Theme - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">飞雪无情</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="Back to Top">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="View Comments">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><script type="text/javascript" src="/lib/smooth-scroll/smooth-scroll.min.js"></script><script type="text/javascript" src="/lib/lazysizes/lazysizes.min.js"></script><script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script><script type="text/javascript" src="/lib/sharer/sharer.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"Copy to clipboard","maxShownLines":10},"comment":{}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
